<template>
	<view class="page">
		<u-gap height="30"></u-gap>
		<view class="box flex-between align-center margin0 padding-row20">
			<view class="label">当前会员级别</view>
			<view class="value">{{
				user.membershipName ? user.membershipName : "基础会员"
			}}</view>
		</view>
		<scroll-view scroll-y="true" class="scrollVue margin20">
			<view class="li relative" v-for="(item, index) in list" :key="index"
				:class="{ active: selectObj.id == item.id }" @click="selectFun(item)">
				<view class="flex align-center">
					<image src="../../static/radio1.png" style="width: 40rpx; height: 40rpx"
						v-if="selectObj.id == item.id"></image>
					<image src="../../static/radio0.png" style="width: 40rpx; height: 40rpx" v-else></image>
					<view class="name">{{ item.title.split("-")[0] }}-</view>
				</view>
				<view class="name" style="padding: 10rpx 0 0 50rpx">{{ item.price }}元/年</view>
				<view class="descri">{{ item.description }}</view>
				<view class="price absolute">{{ item.price }}元/年</view>
			</view>
		</scroll-view>

		<view class="botVue">
			<view class="btn margin0" @click="buyFun()">立即购买</view>
		</view>
	</view>
</template>

<script>
import { mapState } from "vuex";
export default {
	data() {
		return {
			selectObj: {},
			list: [],
		};
	},

	async onLoad() {
		await this.getList();
	},

	computed: {
		...mapState({
			user: (state) => state.user,
		}),
	},

	methods: {
		// 会员列表
		async getList() {
			const res = await this.$request(
				"/aiet-user-center/user/membership/allMemberships",
				{},
				"GET"
			);
			if (res.code === 200) this.list = res.data;
		},

		// 选择套餐
		selectFun(item) {
			this.selectObj = item;
			console.log(this.selectObj);
		},

		// 立即购买
		async buyFun() {
			if (!this.selectObj.id) return this.$u.toast("请选择会员等级");
			uni.showLoading();
			const res = await this.$request(
				"/aiet-user-center/user/orders/wxPay",
				{
					productName: this.selectObj.title,
					orderAmount: 0.01,
					platform: "数字人-H5",
					productType: 2,
					membershipId: this.selectObj.id,
					manufacturer: 1,
				},
				"POST",
				"application/json"
			);
			if (res.code === 200) {
				console.log(res.data);
				uni.hideLoading();
				let payment = res.data;
				let that = this;
				uni.requestPayment({
					timeStamp: payment.timeStamp,
					nonceStr: payment.nonceStr,
					package: payment.package,
					signType: payment.signType,
					paySign: payment.paySign,
					success(payRes) {
						that.$u.toast("购买成功");
						that.$store.dispatch("getUser");
						uni.reLaunch({
							url: '/pages/mine/vip'
						})

					},
					fail(payErr) {
						console.log("支付失败", payErr);
					},
				});
			} else {
				uni.hideLoading();
				this.$u.toast(res.msg);
			}
		},
	},
};
</script>

<style lang="less" scoped>
.scrollVue {
	width: 690rpx;
	height: calc(100vh - 288rpx - var(--status-bar-height));
	background: #fff;
	box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(178, 178, 178, 0.25),
		inset 0rpx 8rpx 8rpx 0rpx rgba(255, 255, 255, 0.25);
}

.box {
	width: 690rpx;
	height: 100rpx;
	background: #fff;
	box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(178, 178, 178, 0.25),
		inset 0rpx 8rpx 8rpx 0rpx rgba(255, 255, 255, 0.25);
	border-radius: 12rpx;

	.value {
		color: #f7c878;
		font-weight: 600;
	}
}

.li {
	width: 690rpx;
	height: 200rpx;
	background: #fff;
	padding: 30rpx;
	box-sizing: border-box;
	margin: 0 auto 20rpx;
	border-radius: 12rpx;

	.price {
		width: 180rpx;
		height: 66rpx;
		line-height: 66rpx;
		text-align: center;
		background: rgba(248, 195, 41, 1);
		color: #fff;
		top: 0rpx;
		right: 0rpx;
		font-weight: 600;
		border-radius: 0 12rpx 0 12rpx;
	}

	.name {
		font-weight: 600;
		color: #000;
		padding-left: 10rpx;
	}

	.descri {
		color: #aeb1c4;
		padding: 10rpx 0 0 50rpx;
	}
}

.active {
	background: linear-gradient(90deg, #ffebb1 0%, #fef2e2 100%);
	border: 1rpx solid #f7c878;

	.descri {
		color: #000;
		padding: 10rpx 0 0 50rpx;
	}

	.price {
		color: #fff;
		background: rgba(248, 195, 41, 1);
	}
}

.botVue {
	width: 750rpx;
	height: 138rpx;
	background: #fff;
	position: fixed;
	left: 0;
	bottom: 0rpx;
	z-index: 99;

	text {
		color: #888;
		line-height: 1;
	}

	.btn {
		width: 690rpx;
		height: 88rpx;
		background: rgba(248, 195, 41, 1);
		border-radius: 12rpx;
		line-height: 88rpx;
		text-align: center;
		color: #fff;
	}
}
</style>
